import React, { FC, useState } from 'react';
import { Resizable } from 'react-resizable';
import { Table } from 'antd';

const ResizableTh = (props: any) => {
  const [width, setWidth] = useState(200);

  const onResize = (event: any, { element, size, handle }: any) => {
    setWidth(size.width);
    console.log(size);
  };

  return (
    <Resizable
      height={0}
      width={width}
      onResize={onResize}
      draggableOpts={{ enableUserSelectHack: false }}
      handle={
        <span
          className="resizable-handle"
          onClick={(e) => {
            e.stopPropagation();
          }}
        ></span>
      }
    >
      <th {...props} style={{ width: width }}>
        {props.title}
      </th>
    </Resizable>
  );
};

const ResizableDemo: FC = () => {
  const [width, setWidth] = useState(200);
  const [height, setHeight] = useState(200);

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: 'name',
      dataIndex: 'name',
    },
  ];

  const onResize = (event: any, { element, size, handle }: any) => {
    setWidth(size.width);
    setHeight(size.height);
  };

  return (
    <>
      <Resizable
        height={height}
        width={width}
        onResize={onResize}
        draggableOpts={{ enableUserSelectHack: false }}
        axis="x"
        handle={
          <span
            className="react-resizable-handle"
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            123123
          </span>
        }
      >
        <div
          style={{
            width: width + 'px',
            height: height + 'px',
            border: '1px solid',
          }}
        >
          <span>Contents</span>
        </div>
      </Resizable>
      <Table
        columns={columns.map((item, key) => ({
          ...item,
          onHeaderCell: () => ({
            title: item.title,
          }),
        }))}
        dataSource={[
          {
            id: '1',
            name: 'HDK',
          },
          {
            id: '2',
            name: 'HDK',
          },
        ]}
        rowKey="id"
        components={{
          header: {
            cell: ResizableTh,
          },
        }}
      />
    </>
  );
};

export default ResizableDemo;
